<template>
    <div class="attack-theory-box hp100 flex-column">
        <div class="echart-top-box flex-between">
            <div class="name-title-box flex">
                <!-- <img :src="src" class="mr10" /> -->
                {{ title }}
            </div>
            <div @click="gotoPage" class="link" v-if="data.intoPage">点击进入</div>
        </div>
        <div
            class="graph-wrapper flex-between"
            style="flex:auto;"
            :style="{ height: `${240 * radio + 20}px` }"
            v-if="data.barData.length > 0"
        >
            <!-- 柱状图 -->
            <div class="bar-wrapper hp100" v-if="data.barData.length > 0">
                <div style="height: 100%" :id="echartId"></div>
            </div>
            <div class="circle-wrapper flex-column hp100" v-if="data.circleData">
                <div
                    class="circle-item flex-between"
                    v-for="(item, index) in data.circleData"
                    :key="index"
                >
                    <div class="flex">
                        <i-circle
                            :size="60 * (radio - 0.1)"
                            :percent="item.per"
                            :stroke-width="11 * radio"
                            :trail-width="10 * radio"
                            :stroke-color="getColor(item.status)"
                            trail-color="var(--home-task-bgcolor)"
                        >
                            <!-- {{ getColor(item.status) }}{{ item.per }} -->
                            <span
                                class="demo-circle-inner"
                                :style="{ color: getColor(item.status) }"
                                >{{ item.num }}</span
                            >
                        </i-circle>
                        <div class="item-status">{{ getStatus(item.status) }}</div>
                    </div>
                    <div class="item-per" :style="{ color: getColor(item.status) }">
                        {{ item.per }}%
                    </div>
                </div>
            </div>
        </div>
        <NoData v-else></NoData>
        <!-- <div v-if="data.data.length == 0" class="bar_defGraphWrap">
      <div class="bar_defGraph"></div>
      <div class="bar_graphText">暂无数据</div>
    </div> -->
    </div>
</template>

<script>
import this_$echarts from "@/libs/echart-import";
import { chartShowName } from '@/libs/echartUtil';
import { mapState } from 'vuex';
export default {
    name: 'barEchart',
    props: {
        echartId: {
            type: String
        },
        src: {
            type: String
        },
        data: {
            type: Object,
            default: () => {}
            // 测试数据
            //  default: () => [{name:'1',age:11},{name:'2',age:11},{name:'3',age:11},{name:'4',age:11},{name:'4',age:11},{name:'4',age:11},{name:'4',age:11},{name:'4',age:11},{name:'4',age:11},{name:'4',age:11},{name:'4',age:11}]
        },
        title: [String, Number],
        color: {
            type: Array,
            default: () => ['#097A7B', '#095456', '#0D3E42']
        }
    },
    data() {
        return {
            barChart: null,
            barData: [],
            radio: 1
        };
    },
    computed: {
        ...mapState('style', {
            echartXColor: ({ themeConfig }) => {
                return themeConfig.echartXColor;
            },
            echartYColor: ({ themeConfig }) => {
                return themeConfig.echartYColor;
            },
            echartXLineColor: ({ themeConfig }) => {
                return themeConfig.echartXLineColor;
            },
            echartYLineColor: ({ themeConfig }) => {
                return themeConfig.echartYLineColor;
            },
            echartSeriesColor: ({ themeConfig }) => {
                return themeConfig.echartSeriesColor;
            },
            echartSeriesAreaColor: ({ themeConfig }) => {
                return themeConfig.echartSeriesAreaColor;
            }
        })
    },
    watch: {
        data: {
            handler: function(newData, oldData) {
                this.data = newData;
                if (this.echartXColor) {
                    this.getBarData();
                }
            },
            deep: true
        },
        echartXColor() {
            this.getBarData();
        },
        echartId: {
            handler(newVal, oldVal) {
                if (newVal != oldVal) {
                    this.echartId = newVal;
                }
            },
            deep: true
        }
    },
    methods: {
        setOutLineColor(color) {
            return `rgb(${color})`;
        },
        setInLineColor(color) {
            return `rgba(${color},0.38)`;
        },
        getColor(status) {
            if (status === 0) {
                return 'var(--home-pre-color)'; //'#6236CD';
            } else if (status === 1) {
                return 'var(--home-ing-color)'; //'#0D7D80';
            } else if (status === 2) {
                return this.title === '培训模式'
                    ? 'var(--home-end-color)'
                    : 'var(--home-ing-color)';
            } else if (status === 4) {
                return 'var(--home-end-color)'; //'#AE453D';
            } else if (status === 5) {
                return 'var(--home-pause-color)'; //#976523
            }
        },
        getStatus(status) {
            if (status === 0) {
                return this.title === '培训模式' ? '未开始' : '准备中';
            } else if (status === 1) {
                return '进行中';
            } else if (status === 2) {
                return this.title === '培训模式' ? '已结束' : '进行中';
            } else if (status === 4) {
                return '已结束';
            } else if (status === 5) {
                return '暂停';
            }
        },
        gotoPage() {
            this.$router.push({
                name: this.data.intoPage
            });
        },
        getBarData() {
            this.data.barData.length > 0
                ? this.$nextTick(() => {
                      this.barChart = this_$echarts.init(document.getElementById(this.echartId));
                      this.barData = this.barChart;
                      this.barChart.setOption(this.getBarOption(this.data.barData));
                      //   chartShowName(this.barChart);
                      setTimeout(() => {
                          this.barChart && this.barChart.resize();
                      });
                  })
                : (this.barData = null);
        },

        // 柱状图配置
        getBarOption(data) {
            let dataList = data.slice(0, 20);
            return {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'none'
                    },
                    backgroundColor: 'var(--echart-tip-bgcolor)',
                    borderColor: 'var(--echart-tip-bgcolor)',
                    // borderRadius: 5,
                    textStyle: {
                        color: 'var(--echart-tip-color)' //设置文字颜色#fff
                    },
                    formatter: (params) => {
                        let tip = '';
                        if (params != null && params.length > 0) {
                            //  tip += '进程名: '+ params[0].name.split('@')[0] +'<br />'+'PID: '+params[0].name.split('@')[1]+'<br/>'
                            for (let i = 0; i < params.length; i++) {
                                const value = params[i].value;
                                const unit = params[i].data.unit
                                tip += `<span style=\"display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${this.color[0]};\"></span>` + params[i].name + ': ' + value + (unit ? `（${unit}）` : '') + '<br/>';
                                // tip +=par--ams[i].marker + params[i].seriesName+': '+(value?value+' %':'0 %')+'<br/>'
                            }
                        }
                        return tip;
                    }
                },

                grid: {
                    top: '3%',
                    left: '1%',
                    right: '1%',
                    bottom: '6%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        // 字体颜色
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: this.echartXColor //'rgba(255, 255, 255, 0.4)'
                            },
                            interval: 0,
                            rotate: 60,
                            formatter: function(params) {
                                //标签输出形式 ---请开始你的表演
                                var my_length = 6;
                                if (params.length > my_length)
                                    return params.substring(0, my_length) + '...';
                                else return params;
                            }
                        },
                        axisTick: { show: false }, // 去掉刻度线
                        boundaryGap: true, // 坐标轴两边是否留⽩
                        // triggerEvent: true,
                        offset: 7,
                        // 线的颜色
                        axisLine: {
                            // onZero: false,
                            lineStyle: {
                                width: 1,
                                color: this.echartXLineColor //'rgba(255, 255, 255, 0.15)'
                            }
                        },
                        data: dataList.map((item) => item.name)
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        splitLine: {
                            show: true,
                            lineStyle: {
                                width: 1,
                                color: this.echartYLineColor //'rgba(255, 255, 255, 0.05)'
                            }
                        }, //去掉网格线
                        axisTick: {
                            show: true,
                            lineStyle: {
                                width: 1,
                                color: this.echartYLineColor //'rgba(255, 255, 255, 0.05)'
                            }
                        }, // 去掉刻度线
                        boundaryGap: false, // 坐标轴两边是否留⽩
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: this.echartYColor //'rgba(255, 255, 255, 0.2)'
                            }
                        }, //取消显示坐标值
                        axisLine: {
                            show: false
                        } //取消坐标轴线
                    }
                ],
                series: [
                    {
                        data: dataList,
                        type: 'bar',
                        name: data.title,
                        barMaxWidth: 10,
                        showSymbol: false,
                        cursor: 'default',
                        backgroundStyle: {
                            color: 'transparent'
                        },
                        itemStyle: {
                            // normal: {
                            //     color: 'rgba(255, 255, 255, 0.4)',
                            //     lineStyle: {
                            //         color: 'rgba(255, 255, 255, 0.15)'
                            //     }
                            // },
                            // normal: {
                            // barBorderRadius: 10,
                            color: new this_$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                {
                                    offset: 1,
                                    color: this.color[0]
                                },
                                // {
                                //     offset: 0.7,
                                //     color: this.color[1]
                                // },
                                {
                                    offset: 0,
                                    color: this.color[0]
                                }
                            ])
                            // }
                        }
                    }
                ]
            };
        }
    },
    created() {},
    mounted() {
        if (this.echartXColor) {
            this.getBarData();
        }
        window.addEventListener('resize', () => {
            // 没有数据的情况下，为undefined 控制台会提示resize 为null,以下两种方法均可用
            this.barChart && this.barChart.resize();
            // try {
            //   this.barChart.resize()
            // } catch (error) {
            //   console.log();
            // }
            let width = document.documentElement.clientWidth;
            this.radio = ((width < 1400 ? 1400 : width) / 1920).toFixed(1);
        });
        let width = document.documentElement.clientWidth;
        this.radio = ((width < 1400 ? 1400 : width) / 1920).toFixed(1);
    },
    destroyed() {}
};
</script>

<style scoped>
.attack-theory-box {
    background: var(--card-body-bgcolor);
    border-radius: 8px 8px 8px 8px;
    padding: 20px 20px 10px;
    /* min-width: 550px; */
}
.echart-top-box {
    /* padding-bottom: 14px; */
    margin-bottom: 20px;
    /* border-bottom: 2px solid var(--divider-color); */
}
.name-title-box {
    font-size: 16px;
    font-weight: bold;
}
.item-per {
    font-size: 26px;
}
.item-status {
    font-size: 16px;
    color: var(--default-color-level2);
    margin-left: 20px;
}
.bar_defGraphWrap {
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    left: 0;
    padding-bottom: 10px;
}
.bar_defGraph {
    margin-left: 0px;
    height: 50%;
    width: 50%;
    position: absolute;
    top: 40%;
    left: 50%;
    /* background: url('../../../assets/baseInfo/defGraph.png') no-repeat center center; */
    background-size: 100% 100%;
    transform: translate(-50%, -50%);
}
.bar_graphText {
    color: #888;
    font-size: 14px;
    text-align: center;
    margin-top: 20px;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.bar-wrapper {
    flex: auto;
}
.circle-wrapper {
    width: 35%;
    min-width: 250px;
    justify-content: space-between;
    padding: 0 0 10px 20px;
}
.circle-item {
    margin-bottom: 4px;
}
.demo-circle-inner {
    font-size: 14px;
}
.link {
    cursor: pointer;
}
.link:hover {
    color: var(--url-color);
}
.flex {
    display: flex;
    align-items: center;
}
.flex-between {
    display: flex;
    justify-content: space-between;
}
.flex-column {
    display: flex;
    flex-direction: column;
}
.hp100 {
    height:100%;
}
</style>
